div{
    width: 50%;
    height: 60px;
    margin: 20px auto;
    border: 2px solid black;
    box-sizing: border-box;
    text-align: center;
    padding: 15px;
}

.d1, .d2, .d3, .d4, .d5, .d6{
    background-color: orange;
    transition-property: width;
    transition-duration: 2s;
}

.d1{
    transition-timing-function: ease;
}
.d2{
    transition-timing-function: ease-in;
}
.d3{
    transition-timing-function: ease-out;
}
.d4{
    transition-timing-function: ease-in-out;
}
.d5{
    transition-timing-function: linear;
}
.d6{
    transition-timing-function: cubic-bezier(0.6, 0, 1, 1);
}

.d1:hover, .d2:hover, .d3:hover, .d4:hover, .d5:hover, .d6:hover{
    width: 100%;
}